import { Component, OnInit, ElementRef, ViewChild, ViewChildren, AfterViewInit, QueryList } from '@angular/core';
import { ChildPanelComponent } from './panel/child-panel.component';

@Component({
  selector: 'app-view-child',
  templateUrl: './view-child.component.html'
})
export class ViewChildComponent implements OnInit, AfterViewInit {
  showOnePanel = true;
  @ViewChild('box', { static: true }) private boxEle: ElementRef;
  @ViewChildren('box') private boxList: QueryList<ElementRef>;
  @ViewChild('panel', { static: true }) private myPanelInstance: ChildPanelComponent;
  @ViewChildren(ChildPanelComponent) private childPanelInstances: QueryList<ChildPanelComponent>;
  constructor() { }

  ngOnInit() {
  }
  ngAfterViewInit(): void {
   console.log('box:', this.boxEle);
   console.log('boxList:', this.boxList);
   console.log('myPanelInstance:', this.myPanelInstance.name);
   console.log('childPanelInstances:', this.childPanelInstances);
   this.childPanelInstances.changes.subscribe(changes => {
    console.log('changes:', changes);
   });
  }
  togglePanel(): void {
    this.showOnePanel = !this.showOnePanel;
  }
}
